<template>
  <div class="carModelBaseInfo">
    <h4 class="withVerticleLineT4 title14">{{ $t('basicInformation') }}</h4>
    <div class="baseInfoItems">
      <full-parent-dom-with-dask :loading="loadingData"></full-parent-dom-with-dask>
      <!-- VIN -->
      <a-row class="baseInfoItem">
        <a-col :md="10">VIN</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :tableEllipsisIsTurnLine="false" :text="detailBaseInfoData.vin || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 服务代码 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('serviceCode') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="detailBaseInfoData.serviceCode || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 服务名称 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('serviceName') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="detailBaseInfoData.serviceName || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 服务到期日期 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('serviceExpireDate') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="$commonFun.getDateStr(detailBaseInfoData.expiration) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 激活状态 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('activeState') }}</a-col>
        <a-col
          :md="14"
          class="result"
        >
          <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="activeStateType[detailBaseInfoData.serviceStatus]"
        ></table-ellipsis>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { mapState } from 'vuex'

export default {
  components: {
    FullParentDomWithDask,
    TableEllipsis
  },
  computed: {
    ...mapState({
      activeStateType: (state) => {
        let obj = {}
        state.serviceConfig.activeStateType.forEach(e => {
          obj[e.value] = e.name
        })
        return obj
      }
    }),
  },
  props: {
    detailBaseInfoData: {
      type: Object,
      default () {
        return {}
      }
    },
    loadingData: {
      type: Boolean,
      default: false
    }
  },
  created () {
    this.getPageDictData()
  },
  data () {
    return {
    }
  },
  methods: {
    getPageDictData () {
      ['getSubsServiceStatusDictCodeData'].forEach((method) => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.carModelBaseInfo {
  margin-bottom: 10px;
  .baseInfoItems {
    position: relative;
    padding-bottom: 15px;
  }
  .baseInfoItem {
    margin-top: 15px;
    .result {
      text-align: right;
    }
  }
}
</style>
<style lang="less">
.editupdateStrategyDialog {
  .ant-modal-footer {
    margin-top: 15px;
  }
}
</style>
